<template>
  <div>
    <div class="query-wrapper">
      <span>变量名称</span>
      <el-input v-model="queryWords" class="query-input" placeholder="请输入" clearable/>
      <el-button class="btn" color="#03CCA1" @click="getTableData">查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <!-- <el-table-column prop="varSort" label="编号" width="80" /> -->
      <el-table-column prop="id" label="变量ID" width="100" />
      <el-table-column prop="name" label="变量名称" />
      <el-table-column prop="value" label="当前值" />
      <el-table-column prop="unit" label="单位" width="90"/>
      <el-table-column prop="acqTime" label="最后采集时间" />
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <span class="link-text" @click="$router.push(`/detailsHistory/${row.identJson}/${equipId}`)">
            <svg-icon name="xqz" color="#03CCA1" class="icon"/>
            历史查询
          </span>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getTableData" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onBeforeUnmount } from 'vue'
import { getVarMsg } from '@/api/settle'
import Pagination from '@/components/Pagination/Index.vue'

const props = defineProps({
  equipId: {
    type: [Number, String],
    default: ''
  }
})

const stopWatch = watch(
  () => props.equipId, 
  () => {
    getTableData()
  }
)

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})
const queryWords = ref('')
const tableData = ref([])
const loading = ref(false)

const getTableData = () => {
  if (!props.equipId && props.equipId !== 0) {
    return
  }
  loading.value = true
  getVarMsg({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    equipId: props.equipId,
    name: queryWords.value ?? undefined
  })
    .then(res => {
      tableData.value = res.data.records ?? []
      pageProps.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value.length = 0
      pageProps.value.total = 0
      loading.value = false
    })
}

onBeforeUnmount(() => {
  stopWatch()
})
getTableData()

</script>
<style lang="scss" scoped>
.query-wrapper {
  background: #F5F7FA;
  width: 100%;
  padding: 24px;
  display: flex;
  font-size: 14px;
  color: #000;
  align-items: center;
  margin-bottom: 24px;
  .query-input {
    width: 200px;
    margin-left: 12px;
    margin-right: 24px;
  }
  .btn {
    width: 112px;
    color: #fff;
  }
}
.link-text {
  color: #03CCA1;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14;
  .icon {
    margin-right: 4px;
  }
}
</style>
